<template>
	<view class="abnormalBox flex-center" :style="getAbnormalStyle" v-if="getAbnormalInfo">
       <view class="flex-center box">
       	  <mt-image  :src="getAbnormalInfo.image"  imageClass='img'  v-if="getAbnormalInfo.image" />
       	  <view class="text">{{getAbnormalInfo.message}}</view>
       </view>
	</view>
</template>

<script>
import status from '../../common/data/status'
import filter from '../../common/js/filter'
	export default {
		props: {
			//样式
			abnormalStyle: {
				default: null,
			},
			code:{
				default:204
			},
			//提示
			info:{
				default:null
			},
			//信息
			message:{
				default:null
			},
			position:{
				default:'unset'
			}
		},
		computed:{
			getAbnormalStyle(){
				let data = this.abnormalStyle
				let newData = {}
				if(this.position == 'unset'){
					 newData = {
						position:"unset",
						transform: "unset",
						height:"100%",
						width:"100%",
					}
					data = {...data,...newData}
				}
				return filter.compatibleStyles(data)
			},
			getAbnormalInfo(){
				let info = status.statusImage.find(item => item.code == this.code)
				let newData = {...info,...this.info}
				if(this.message)
					newData.message = this.message
					
		
				return newData
			}
		},
		data() {
			return {

			}
		},

		methods: {

		}
	}
</script>

<style lang="less" scoped>
.abnormalBox{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	
	overflow: hidden;
	

	width: 100vw;
	height: var(--screenHeight);
	min-height: 250px;

	
	flex-wrap: wrap;
	
	.img{
	    width: 200px;
		height: 200px;

	}
	.text{
		width: 100%;
		text-align: center;
		max-height: 200px;
        overflow: auto;
		box-sizing: border-box;
		word-break: break-all;
		word-wrap: break-word;
	
	}
}

.box{
	width: 100%;
	margin-bottom: 100px;
}
</style>